RCFilters: Adjust highlight for seen/unseen states in Watchlist

Bug: T171235
Change-Id: I33d059d2be83e4730e6dc82f689f49a514286874

diff --git a/includes/specials/SpecialWatchlist.php b/includes/specials/SpecialWatchlist.php
index cecc182..862863a 100644 (file)
--- a/includes/specials/SpecialWatchlist.php
+++ b/includes/specials/SpecialWatchlist.php
@@ -97,6 +97,8 @@ class SpecialWatchlist extends ChangesListSpecialPage {
                parent::execute( $subpage );
 
                if ( $this->isStructuredFilterUiEnabled() ) {
+                       $output->addModuleStyles( [ 'mediawiki.rcfilters.highlightCircles.seenunseen.styles' ] );
+
                        $output->addJsConfigVars( 'wgStructuredChangeFiltersLiveUpdateSupported', false );
                        $output->addJsConfigVars(
                                'wgStructuredChangeFiltersSavedQueriesPreferenceName',

diff --git a/resources/Resources.php b/resources/Resources.php
index 4a7f3e4..459ad83 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1748,6 +1748,12 @@ return [
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less',
                ],
        ],
+       'mediawiki.rcfilters.highlightCircles.seenunseen.styles' => [
+               'styles' => [
+                       'resources/src/mediawiki.rcfilters/' .
+                       'styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less',
+               ],
+       ],
        'mediawiki.rcfilters.filters.dm' => [
                'scripts' => [
                        'resources/src/mediawiki.rcfilters/mw.rcfilters.js',

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index 5a885ec..27acd75 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -8,8 +8,7 @@
 }
 
 // This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false ) {
-       background-color: @color;
+.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: #54595d, @emptyBackground: false ) {
        .box-sizing( border-box );
        min-width: @diameter;
        width: @diameter;
@@ -18,8 +17,15 @@
        margin: @padding;
        border-radius: 50%;
 
+       & when ( @emptyBackground = false ) {
+               background-color: @color;
+       }
+       & when ( @emptyBackground = true ) {
+               background-color: @highlight-none;
+       }
+
        & when ( @border = true ) {
-               border: 1px solid #54595d;
+               border: 1px solid @borderColor;
        }
 }
 

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
new file mode 100644 (file)
index 0000000..f4ca717
--- /dev/null
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
@@ -0,0 +1,66 @@
+@import 'mw.rcfilters.mixins';
+
+.mw-rcfilters-ui-changesListWrapperWidget {
+       ul {
+               list-style: none;
+
+               li {
+                       list-style: none;
+               }
+       }
+
+       // Make more specific for the overrides
+       div&-highlights {
+               display: inline-block;
+
+               &-color {
+                       &-none {
+                               display: inline-block;
+                               li.mw-changeslist-watchedseen & {
+                                       .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
+                                               .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
+                                       }
+
+                                       .mw-rcfilters-ui-changesListWrapperWidget:not(.mw-rcfilters-ui-changesListWrapperWidget-highlighted) & {
+                                               .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
+                                       }
+                               }
+
+                               li.mw-changeslist-watchedunseen & {
+                                       .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
+                                               .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
+                                       }
+
+                                       .mw-rcfilters-ui-changesListWrapperWidget:not(.mw-rcfilters-ui-changesListWrapperWidget-highlighted) & {
+                                               .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
+                                       }
+                               }
+
+                       }
+
+                       // Watchlist unseen highlighted fixes
+                       // Seen (empty circle)
+                       // There's no need to correct 'unseen' because that would be
+                       // a filled colorful circle, which is the regular rendering
+                       .mw-changeslist-watchedseen &-c1 {
+                               .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
+                       }
+
+                       .mw-changeslist-watchedseen &-c2 {
+                               .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
+                       }
+
+                       .mw-changeslist-watchedseen &-c3 {
+                               .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
+                       }
+
+                       .mw-changeslist-watchedseen &-c4 {
+                               .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
+                       }
+
+                       .mw-changeslist-watchedseen &-c5 {
+                               .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
+                       }
+               }
+       }
+}

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
index dc7afab..3fe9b4c 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -84,7 +84,9 @@
                        display: inline-block;
                }
 
-               div {
+               // This needs to be very specific, since these are
+               // position rules that should apply to all overrides
+               .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-ui-changesListWrapperWidget-highlights > div&-circle {
                        .box-sizing( border-box );
                        margin-right: @result-circle-margin;
                        vertical-align: middle;

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
index 3060f25..fc8c9ef 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
@@ -5,6 +5,8 @@
 @highlight-c3: #fc3;
 @highlight-c4: #ff6d22;
 @highlight-c5: #d33;
+@highlight-bluedot: #1d4aad; // Simulates the 'known' browser <li> blue dot
+@highlight-grey: #54595d; // The color of full dots on Watchlist when highlight is enabled
 
 // Muted state
 @muted-opacity: 0.5;

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index a97ffe9..ec12783 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -251,6 +251,7 @@
                                .addClass( highlightClass )
                                .append(
                                        $( '<div>' )
+                                               .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-circle' )
                                                .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-none' )
                                                .prop( 'data-color', 'none' )
                                );
@@ -264,6 +265,7 @@
                        $highlights.append(
                                $( '<div>' )
                                        .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-' + color )
+                                       .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-circle' )
                                        .prop( 'data-color', color )
                        );
                } );